<template>
	<!-- 积分list -->
	<view>
		<u-navbar title="积分明细" :autoBack="true" :placeholder="true"></u-navbar>
		<view class="minBox">
			<view class="box" v-for="item in detailedList" :key="item.id">
				<view class="titleBox">
					<view class="topBox">
						<view class="title">{{item.memo}}</view>
						<view class="status" v-if="item.status==1">
							审核中
						</view>
						<view class="status" v-if="item.status==2">
							审核成功
						</view>
						<view class="status" v-if="item.status==3">
							审核失败
						</view>
					</view>
					<view class="time">{{$u.timeFormat(item.createtime, 'yyyy年mm月dd日')}}</view>
				</view>
				<view class="money" :class="minus(item.after,item.before)?'':'black'">
					<!-- {{minus(item.after,item.before)?'+':'-'}}{{item.money}} -->
					{{item.score}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailedList: [{
					id: 1,
					name: '受邀人成功下单',
					type: 1,
					money: 20.00
				}, {
					id: 2,
					name: '提现',
					type: 2,
					money: 20.00
				}]
			};
		},
		onLoad() {
			this.getScoreDetail()
		},
		methods: {
			// 获取积分列表
			async getScoreDetail() {
				let res = await this.$api.getScoreDetail()
				this.detailedList = res.data.data
			},
			minus(a, b) {
				return Number(a) - Number(b) > 0 ? true : false
			}
		}
	}
</script>

<style lang="scss">
	.u-navbar__content__title {
		color: rgba(0, 0, 0, 0.8);
		font-size: 32rpx;
		font-weight: 700;
	}

	page {
		background: #fff;
	}

	.minBox {
		padding: 24rpx;

		.box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			margin-bottom: 34rpx;

			.titleBox {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.topBox {
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;

					.title {
						color: rgba(0, 0, 0, 0.9);
						font-size: 28rpx;
					}

					.status {
						margin-left: 6rpx;
						padding: 4rpx 24rpx;
						border-radius: 96rpx;
						color: rgba(128, 110, 254, 1);
						font-size: 24rpx;
						background: rgba(243, 241, 255, 1);
					}
				}

				.time {
					color: rgba(0, 0, 0, 0.26);
					font-size: 24rpx;

					text {
						margin-left: 4rpx;
					}
				}
			}

			.money {
				color: rgba(128, 110, 254, 1);
				font-size: 40rpx;
			}

			.black {
				color: rgba(0, 0, 0, 0.8);
				font-size: 40rpx;
			}
		}
	}
</style>
